<template>
	<view>
		<pageHeader ref="pageHeader" bgImg="/static/img/maskingBg.png" logoLeft="/static/img/logoIndex.png">
		</pageHeader>

		<view class="header-wrapper">
			<h1>欢迎光临</h1>
			<p>urbanleaving露营咖啡</p>
		</view>

		<view class="category-wrapper" :style="{ top: pageHeaderH+'px' }">
			<scroll-view class="category-box" scroll-x="true" scroll-with-animation show-scrollbar="true">
				<view class="category-item" :class="{active: (item.categoryId==activityListParams.categoryId)}"
					v-for="(item, index) in categotyList" :key="index" @click="handleClickCategory(item.categoryId)">
					{{item.categoryName}}
				</view>
			</scroll-view>
		</view>

		<view class="activity-wrapper">
			<view class="activity-list">
				<u-list :height="listWrapperH+'px'" @scrolltolower="handleLoadMore">
					<u-list-item v-for="(item, index) in activityList" :key="index">
						<view class="activity-item" @click="handleToDetail(item.activityId)">
							<view class="activity-img">
								<image :src="item.coverImg" mode="aspectFill"></image>
								<view class="activity-cate">{{item.categoryName}}</view>
							</view>
							<view class="activity-title">{{item.activityName}}</view>
							<view class="activity-item_ft">
								<view class="activity-info">
									<text>{{ item.timeStart | formatDate }} - {{ item.timeEnd | formatDate }}</text>
									<text>{{item.address||'-'}}</text>
								</view>
								<view class="activity-btn">
									<span>查看详情</span>
									<image src="/static/img/rightIcon.png"></image>
								</view>
							</view>
						</view>
					</u-list-item>
					<view class="footer-wrapper">- 伴你一起探索新世界 -</view>
				</u-list>
			</view>
		</view>
	</view>
</template>
<script>
	import pageHeader from '@/components/pageHeader'

	import {
		getCateList,
		getActivityList
	} from '@/api/activity.js';
	import {
		dateFormat
	} from '@/utils/util.js';

	export default {
		components: {
			pageHeader
		},
		data() {
			return {
				//当前页面参数
				options: {},
				// 顶部导航高度
				pageHeaderH: 0,
				// 列表滚动高度
				listWrapperH: 0,
				// 分类列表
				categotyList: [],
				// 活动列表
				activityList: [],
				// 查询参数
				activityListParams: {
					pageNum: 0,
					pageSize: 10,
					categoryId: '',
				},
				// 是否没有更多了
				isNoMore: false,
			}
		},
		onReady() {
			let that = this
			that.pageHeaderH = that.$refs.pageHeader.headerH
			// 获取顶部tabs高度&列表滚动高度
			const query = uni.createSelectorQuery().in(this);
			query.select(".category-wrapper").boundingClientRect(function(data) {
				let categoryWrapperH = data.height
				that.listWrapperH = (uni.getSystemInfoSync().windowHeight - categoryWrapperH - that.pageHeaderH)
			}).exec()
		},
		onLoad(options) {
			let that = this
			that.options = options
			this._getCateList()
			this._getActivityList(true)
		},
		onShow() {},
		filters: {
			formatDate(date) {
				return dateFormat('YYYY/mm/dd', new Date(date))
			},
		},
		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			return {
				path: `/pages/index/index`,
				imageUrl: `/static/img/sharePost.jpg`,
			}
		},
		methods: {
			// 获取活动分类
			_getCateList() {
				const that = this
				return new Promise((resolve, reject) => {
					getCateList({
							categoryType: 1
						})
						.then(res => {
							res.rows.unshift({
								'categoryId': '',
								'categoryName': '全部'
							})
							that.categotyList = res.rows
						})
				})
			},

			// 获取活动列表
			_getActivityList(refresh) {
				let that = this
				if (refresh) {
					that.activityListParams.pageNum = 1
					that.activityList = []
					that.isNoMore = false
				} else if (that.isNoMore) {
					that.$util.showToast('没有更多了')
					return
				}
				uni.showLoading()
				getActivityList(that.activityListParams).then(res => {
					that.activityList = that.activityList.concat(res.rows)
					if (res.rows.length == that.activityListParams.pageSize) {
						that.activityListParams.pageNum++
					} else {
						that.isNoMore = true
					}
				}).finally(res => {
					uni.hideLoading()
				})
			},

			// 加载更多
			handleLoadMore() {
				this._getActivityList()
			},

			// 切换活动分类
			handleClickCategory(categoryId) {
				let that = this
				let selector = uni.createSelectorQuery().in(this);
				selector.select(".header-wrapper").boundingClientRect(function(data) {
					uni.pageScrollTo({
						scrollTop: data.height,
						duration: 300
					});
				}).exec()
				that.activityListParams.categoryId = categoryId
				that._getActivityList(true)
			},

			// 跳转活动详情
			handleToDetail(activityId) {
				this.$util.navTo('pages/activity/detail', {
					activityId
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.header-wrapper {
		width: 100%;
		background-color: #F2EEE7;
		padding: 16rpx 32rpx;
		box-sizing: border-box;

		h1 {
			font-size: 52rpx;
			font-weight: bold;
			line-height: 56rpx;
		}

		p {
			font-size: 28rpx;
			line-height: 32rpx;
			margin-top: 8rpx;
		}
	}

	.category-wrapper {
		position: sticky;
		box-sizing: border-box;
		background-color: rgba(242, 238, 231, 1);
		z-index: 10;
		padding-top: 16rpx;

		.category-box {
			position: relative;
			display: flex;
			align-items: center;
			height: 120rpx;
			white-space: nowrap;
			box-sizing: border-box;
			padding: 24rpx 0;

			&::after,
			&::before {
				content: '';
				position: absolute;
				display: block;
				left: 32rpx;
				right: 32rpx;
				border-top: 1rpx solid #1A1311;
			}

			&::before {
				top: 0rpx;
			}

			&::after {
				bottom: 0rpx;
			}

			.category-item {
				display: inline-block;
				color: #1A1311;
				font-size: 32rpx;
				line-height: 72rpx;
				height: 72rpx;
				border-radius: 36rpx;
				box-sizing: border-box;
				padding: 0 32rpx;
				border: 1rpx solid #1a1311;

				&+.category-item {
					margin-left: 24rpx;
				}

				&:first-child {
					margin-left: 32rpx;
				}

				&:last-child {
					margin-right: 32rpx;
				}

				&.active {
					background-color: #1A1311;
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}

	.activity-wrapper {
		.activity-list {
			.activity-item {
				box-sizing: border-box;
				padding: 32rpx;
				color: #1A1311;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					display: block;
					left: 32rpx;
					right: 32rpx;
					border-top: 1rpx solid #1A1311;
				}

				.activity-img {
					position: relative;
					height: 360rpx;
					border-radius: 24rpx;
					overflow: hidden;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}

					.activity-cate {
						display: block;
						position: absolute;
						top: 24rpx;
						left: 24rpx;
						background-color: #fff;
						padding: 0 16rpx;
						font-size: 24rpx;
						line-height: 48rpx;
						border-radius: 24rpx;
					}
				}

				.activity-title {
					font-size: 48rpx;
					font-weight: bold;
					margin-top: 32rpx;
				}

				.activity-item_ft {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.activity-info {
						flex: 1;
						font-size: 28rpx;
						line-height: 40rpx;
						overflow: hidden;
						padding-right: 32rpx;

						text {
							display: block;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.activity-btn {
						font-size: 28rpx;
						line-height: 72rpx;
						color: #fff;
						background-color: #1A1311;
						border-radius: 36rpx;
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						flex-shrink: 0;

						image {
							display: block;
							width: 24rpx;
							height: 24rpx;
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}

	.footer-wrapper {
		font-size: 24rpx;
		color: rgba(0, 0, 0, .4);
		padding: 64rpx 32rpx;
		text-align: center;
	}
</style>
